<template>
  <div class="search">
    <hm-header>
      <template #left>
        <i class="iconfont iconjiantou2" @click="back"></i>
      </template>
      <template #center>
        <van-search
          v-model="searchKey"
          placeholder="请输入搜索关键词"
          shape="round"
          autofocus
          @input="searchInput"
          @search="searchArt" />
      </template>
      <template #right>
        <div class="search-bar" @click="searchArt">搜索</div>
      </template>
    </hm-header>

    <div v-if="searchArtList.length" class="searchArt">
      <hm-post-item v-for="item in searchArtList" :key="item.id" :artItem="item"></hm-post-item>
    </div>

    <div v-else>
      <!-- 历史记录 -->
      <hm-search-item class="history" title="历史记录" :valueList="searchKeyList" @click="historyClick"></hm-search-item>

      <!-- 热门搜索 -->
      <hm-search-item title="热门搜索" :valueList="searchRecommendList" @click="searchRecommentClick"></hm-search-item>
    </div>

  </div>
</template>

<script>
import HmSearchItem from 'components/hm-search-item.vue'
import HmPostItem from 'components/hm-post-item.vue'

export default {
  data () {
    return {
      searchKey: '',
      searchKeyList: [],
      pageIndex: 1,
      pageSize: 5,
      searchArtList: [],
      total: 0,
      searchRecommendList: []
    }
  },

  components: {
    HmSearchItem,
    HmPostItem
  },

  async created () {
    this.searchKeyList = JSON.parse(localStorage.getItem('history_search')) || []
    this.getSearchRecommend()
  },

  methods: {
    /**
     * 网络请求
     */
    // 搜索文章
    async getSearchArt (keyword) {
      const { data: res } = await this.$axios.get('/post_search', {
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          keyword: keyword
        }
      })
      const { data, statusCode, total } = res
      console.log(res)
      if (statusCode === 200) {
        if (data.length === 0) {
          return this.$toast('没有搜索到相关文章')
        }
        this.total = total
        return data
      }
    },

    // 搜索推荐
    async getSearchRecommend (keyword = '') {
      const { data: res } = await this.$axios.get('/post_search_recommend', {
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          keyword: keyword
        }
      })
      const { data, statusCode } = res
      console.log(res)
      if (statusCode === 200) {
        this.searchRecommendList = data
      }
    },

    /**
     * 事件处理
     */
    async searchArt () {
      if (this.searchKey.trim() === '') {
        return false
      }
      const index = this.searchKeyList.indexOf(this.searchKey)

      if (index !== -1) {
        this.searchKeyList.splice(index, 1)
      }
      this.searchKeyList.unshift(this.searchKey)
      if (this.searchKeyList.length > 6) {
        this.searchKeyList.pop()
      }
      localStorage.setItem('history_search', JSON.stringify(this.searchKeyList))
      this.searchArtList = await this.getSearchArt(this.searchKey) || []
    },

    // 监听搜索框的内容
    searchInput () {
      if (!this.searchKey) {
        this.searchArtList = []
      }
    },

    // 点击历史记录
    historyClick (item) {
      this.searchKey = item
      this.searchArt()
    },

    // 返回按钮
    back () {
      if (this.searchArtList.length) {
        this.searchArtList = []
        this.searchKey = ''
      } else {
        this.$router.go(-1)
      }
    },

    // 点击热门推荐
    searchRecommentClick (item) {
      this.$router.push(`/article/${item.id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.van-search {
  padding: 0;
  font-weight: normal;
  border-radius: 36px;
  border: 1px solid #eee;
  .van-search__content {
    background-color: #fff;
  }
}

.search-bar {
  font-size: 14px;
  color: #333;
}

.history {
  border-bottom: 1px solid #ccc;
}
</style>
